<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题跟踪系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>问题跟踪系统</h1>
        
        <div class="search-bar">
            <div class="filter-group">
                <select id="statusFilter">
                    <option value="">状态</option>
                    <option value="处理中">处理中</option>
                    <option value="待处理">待处理</option>
                    <option value="已解决">已解决</option>
                </select>
                
                <select id="priorityFilter">
                    <option value="">优先级</option>
                    <option value="紧急">紧急</option>
                    <option value="普通">普通</option>
                    <option value="低">低</option>
                </select>
                
                <input type="text" id="searchKeyword" placeholder="搜索关键词">
            </div>

            <div class="date-range">
                <span>创建时间：</span>
                <input type="date" id="startDate">
                <span>至</span>
                <input type="date" id="endDate">
            </div>
            
            <div class="button-group">
                <button class="search-btn">搜索</button>
                <button class="reset-btn">重置</button>
            </div>
        </div>

        <div class="table-container">
            <div class="table-header">
                <button id="newIssueBtn" class="new-issue-btn">新建问题</button>
            </div>
            
            <table id="issueTable">
                <thead>
                    <tr>
                        <th>问题标题</th>
                        <th>状态</th>
                        <th>优先级</th>
                        <th>创建者</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="issueTableBody">
                </tbody>
            </table>
        </div>

        <div class="pagination">
            <span>共 <span id="totalCount">3</span> 条</span>
            <select id="pageSize">
                <option value="10">10条/页</option>
            </select>
            <button class="page-btn" id="firstPage">首页</button>
            <button class="page-btn" id="prevPage">上一页</button>
            <span id="currentPage">1</span>
            <button class="page-btn" id="nextPage">下一页</button>
            <button class="page-btn" id="lastPage">末页</button>
        </div>
    </div>

    <!-- 新建问题模态框 -->
    <dialog id="newIssueDialog">
        <form id="newIssueForm">
            <h2>新建问题</h2>
            <div class="form-group">
                <label for="title">标题：</label>
                <input type="text" id="title" required>
            </div>
            <div class="form-group">
                <label for="status">状态：</label>
                <select id="status" required>
                    <option value="处理中">处理中</option>
                    <option value="待处理">待处理</option>
                    <option value="已解决">已解决</option>
                </select>
            </div>
            <div class="form-group">
                <label for="priority">优先级：</label>
                <select id="priority" required>
                    <option value="紧急">紧急</option>
                    <option value="普通">普通</option>
                    <option value="低">低</option>
                </select>
            </div>
            <div class="dialog-buttons">
                <button type="submit">确定</button>
                <button type="button" id="cancelBtn">取消</button>
            </div>
        </form>
    </dialog>

    <!-- 修改问题模态框 -->
    <dialog id="editIssueDialog">
        <form id="editIssueForm">
            <h2>修改问题</h2>
            <div class="form-group">
                <label for="editTitle">标题：</label>
                <input type="text" id="editTitle" required>
            </div>
            <div class="form-group">
                <label for="editStatus">状态：</label>
                <select id="editStatus" required>
                    <option value="处理中">处理中</option>
                    <option value="待处理">待处理</option>
                    <option value="已解决">已解决</option>
                </select>
            </div>
            <div class="form-group">
                <label for="editPriority">优先级：</label>
                <select id="editPriority" required>
                    <option value="紧急">紧急</option>
                    <option value="普通">普通</option>
                    <option value="低">低</option>
                </select>
            </div>
            <div class="dialog-buttons">
                <button type="submit">确定</button>
                <button type="button" id="editCancelBtn">取消</button>
            </div>
        </form>
    </dialog>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 